import React, { useEffect, useState } from 'react'
import { Toast, NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { Swiper, Image } from 'react-vant';

import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'

import './index.css'
function index() {
  const navigate = useNavigate();
  let [Carcount, setCarcount] = useState(0)
  const images = [
    '../src/assets/608.jpg',
    '../src/assets/38.jpg',
    '../src/assets/608.jpg',
    '../src/assets/608.jpg',
    '../src/assets/41.jpg',
  ];
 
   const  tiao = useNavigate()
   const godertta = () => {
       tiao('/dian')
   }
   const tiao1 = useNavigate()
   const [cartList,setCartList]=useState([])
   const CartXq = () => {
    //  tiao1('/cart')
    console.log("加入购物车") 
    setCarcount(Carcount+1)
    cartList.push(carListObj)
    console.log(cartList)
    localStorage.setItem('cartList',JSON.stringify(cartList))
   }
   const addCart=()=>{
    navigate('/cart')
   }

   const carListObj:any={
    price:198,
    title:'避孕药一般指女性用避孕药，多由雌激素和孕激素配伍而成，也有单方的孕激素及一些非甾体药物。避孕药能影响生殖过程的不同环节，从而达到抗生育的目的',
    img:"https://img2.baidu.com/it/u=1406245539,1699632457&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=645"
   }
  return (
    <div>
      
      <div className='xqtitle'>
      <NavBar
        title="药品详情"
        leftText="返回"
        rightText="按钮"
        
        onClickLeft={() => navigate(-1)}
        onClickRight={() => Toast("按钮")}
      />
      </div>

      <div className="a1">
        <Swiper>
          {images.map((image) => (
            <Swiper.Item key={image}>
              <Image lazyload src={image} className='Imageimg' />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className='zi56'>
        <p className='p56'>避孕药一般指女性用避孕药.....</p>
        <p className='p56'>
          ￥198
          <span className='span56'>￥258</span>
        </p>
      </div>
      <div className='zi57'>
        <div className="left57">
          <p className='p57'>优惠 <span className='span57'> 卷100 卷100</span> 共四张</p>
        </div>

      </div>


      <div className='zi57'>
        <div className="left57">
          <p className='p57'>规格 <span className='span57'> 请选择规格</span> </p>
        </div>

      </div>


      <div className='zi57'>
        <div className="left57">
          <p className='p57'>配送 <span className='span57'> 物流配送</span> </p>
        </div>

      </div>

      <div className='box57'>
        <div className="left58">
          <img src="../src/assets/44.jpg" alt="" />
        </div>
        <div className="center58">
          <p className='p58'>微脉心选官方自营
            <span className='span58'>
              <br /> 地址: 浙江省杭州市
            </span>
          </p>
        </div>
        <div className="right58">
          <img src="../src/assets/18.jpg" alt="" className='img58' onClick={godertta} />
        </div>
      </div>
      
      <div className='zwh'></div>
      <ActionBar>
        <ActionBar.Icon icon={<ChatO />} badge={{ dot: true }} text='客服' />
        <ActionBar.Icon icon={<CartO />} badge={{ content: Carcount }} text='购物车' onClick={addCart}/>
        <ActionBar.Icon icon={<ShopO />} badge={{ content: 12 }} text='店铺' />
        <ActionBar.Button type='warning' text='加入购物车' onClick={CartXq} />
        <ActionBar.Button type='danger' text='立即购买' />
      </ActionBar>
    </div>
  )
}

export default index
